/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-20 16:47:56
 * @Description: 首页-控制台-关联风险
 */
import React from "react";
import "./style.scss";
import { Pagination } from "antd";
import { observer, inject } from "mobx-react";
import { openDetail } from "@/utils/util";

@inject("RelationRisksStore")
@observer
class RelationRisks extends React.Component {
    componentDidMount() {
        this.props.RelationRisksStore.getTopData();
        this.props.RelationRisksStore.getListData();
    }
    render() {
        const { topData, data } = this.props.RelationRisksStore;
        return (
            <div className="relation-risks table-pagination">
                <h3 className="common-title">关联风险提示</h3>
                <ul className="top-num-list">
                    <li>
                        <i className="icon phone-icon" />
                        <div className="detail">
                            <p className="value">{topData.count}</p>
                            <p className="name">本月新发现APP</p>
                        </div>
                    </li>
                    <li>
                        其中<span className="count">{topData.app}</span>个和我的管控APP有关联
                    </li>
                    <li>
                        其中<span className="count">{topData.person}</span>个和我的管控人员有关联
                    </li>
                </ul>
                <h3 className="common-title" style={{ marginTop: 20 }}>
                    关联记录
                </h3>
                <ul className="lists-data">
                    <li>
                        <span>APP名称</span>
                        <span>下载人数</span>
                        <span>关联企业</span>
                        <span>发现日期</span>
                        <span>操作</span>
                    </li>
                    {data.map((d, index) => (
                        <li key={`list-${index}`}>
                            <span>{d.name}</span>
                            <span>{d.value}</span>
                            <span>{d.company}</span>
                            <span>{d.time}</span>
                            <span>
                                <button className="btn" onClick={() => openDetail(d.id)}>
                                    查看
                                </button>
                            </span>
                        </li>
                    ))}
                </ul>
                <div className="common-pagination">
                    <Pagination
                        defaultcurrent={6}
                        total={500}
                        onChange={page => this.props.RelationRisksStore.changePage(page)}
                    />
                </div>
            </div>
        );
    }
}

export default RelationRisks;
